<%--
  系统首页
  Author: ZheL2
  Date: 2023/12/12
  Version: 1.0
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="m" uri="/WEB-INF/tld/mytag.tld"%>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 设置视口宽度为设备屏幕宽度，而且不缩放 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="<c:url value='/resources/css/bootstrap.css'/>">
  <link rel="stylesheet" type="text/css" href="<c:url value='/resources/css/style.css' />">
  <script src="<c:url value='/resources/js/bootstrap.bundle.js'/> "></script>
  <title>校园社团管理系统</title>

</head>
<body>
  <div class="page-container">
    <!-- 首页顶部导航栏 -->
    <header>
      <jsp:include page="homeHeader.jsp" />
    </header>

    <div class="content">
      <!-- 轮播 首页大荧幕 -->
      <div id="home" class="carousel slide" data-bs-ride="carousel">

        <!-- 指示符 -->
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#home" data-bs-slide-to="0" class="active"></button>
          <button type="button" data-bs-target="#home" data-bs-slide-to="1"></button>
          <button type="button" data-bs-target="#home" data-bs-slide-to="2"></button>
        </div>

        <!-- 轮播图片 -->
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="<c:url value="/resources/img/bg1-mountain.jpg"/>" class="d-block" style="width:100%; height: 90vh; object-fit: cover;">
          </div>
          <div class="carousel-item">
            <img src="<c:url value="/resources/img/bg2-road.jpg"/>" class="d-block" style="width:100%; height: 90vh; object-fit: cover;">
          </div>
          <div class="carousel-item">
            <img src="<c:url value="/resources/img/bg3-night.jpg"/>" class="d-block" style="width:100%; height: 90vh; object-fit: cover;">
          </div>
        </div>

        <!-- 轮播图片上的文字内容 -->
        <div class="carousel-caption" style="bottom: 40%;">
          <h1 style="font-size: 4vw;">欢迎来到校园社团管理系统</h1>
        </div>

        <!-- 左右切换按钮 -->
        <button class="carousel-control-prev" type="button" data-bs-target="#home" data-bs-slide="prev">
          <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#home" data-bs-slide="next">
          <span class="carousel-control-next-icon"></span>
        </button>
      </div>
      <!-- 首页大荧幕 底-->

      <br><br><hr><br>

      <!-- 系统首页展示内容 -->
      <div class="container">

        <!-- 首页社团内容 -->
        <div style="margin-bottom: 100px">
          <!-- 社团大荧幕 -->
          <div class="jumbotron jumbotron-fluid" style="background-image: url('${pageContext.request.contextPath}/resources/img/bg.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; height: 80vh;">
            <div class="container text-center">
              <br><br>
              <h1 class="display-4" style="font-weight: bold; color:white; margin-top:300px">社团简介</h1>
              <p class="lead" style="color:white">在这里，你将发现你所期待的一切：温暖的社区，激励人心的学习环境，丰富的课外活动，以及无限的探索机会。</p>
            </div>
          </div>

          <!-- 社团信息 -->
          <div class="container my-5">
            <div class="row">
              <div class="col-12">
                <h2 class="text-center" >加入社团</h2>
                <p class="text-center">加入各种各样的社团，揭开精彩活动的序幕。在这里，每一次相聚都是新发现的旅程 —— 一个充满热情、启发思考、扩展视野的场所。准备好，让每个瞬间成为永恒的回忆，让每个经历启动成功之路。</p>
              </div>
            </div>
            <div class="row">
              <div class="col-12 col-md-4 mb-3">
                <div class="image-container">
                  <img src="${pageContext.request.contextPath}/resources/img/club1.jpg" class="img-fluid" alt="Club Activity 1">
                </div>
              </div>
              <div class="col-12 col-md-4 mb-3">
                <div class="image-container">
                  <img src="${pageContext.request.contextPath}/resources/img/club2.jpg" class="img-fluid" alt="Club Activity 2">
                </div>
              </div>
              <div class="col-12 col-md-4 mb-3">
                <div class="image-container">
                  <img src="${pageContext.request.contextPath}/resources/img/club3.jpg" class="img-fluid" alt="Club Activity 3">
                </div>
              </div>
            </div>
          </div>
          <!-- 欢迎信息 底 -->
        </div>

        <hr><br>

        <!-- 首页活动内容 -->
        <div>
          <!-- 活动大荧幕 -->
          <div class="jumbotron jumbotron-fluid" style="background-image: url('${pageContext.request.contextPath}/resources/img/activity1.jpg'); background-position: center center; background-size: cover; height: 80vh;">
            <div class="container text-center">
              <br><br>
              <h1 class="display-4" style="font-weight: bold; color:white; margin-top:300px">丰富的社团活动</h1>
              <p class="lead" style="color:white">这里有丰富的社团活动</p>
            </div>
          </div>

          <!-- 活动信息 -->
          <div class="container my-5">
            <div class="row">
              <div class="col-12">
                <h2 class="text-center">参加活动</h2>
                <p class="text-center">步入活动的热潮，感受社团的活力。这里，每一刻都充满了学习的热情和创造的机遇，每一个活动都旨在激发你的潜力，引领你踏上探索的旅程。准备好迎接挑战，享受快乐，与我们共同创造难忘的经历吧。</p>
              </div>
            </div>
            <div class="row">
              <div class="col-12 col-md-4 mb-3">
                <div class="image-container">
                  <img src="${pageContext.request.contextPath}/resources/img/activity2.jpg" class="img-fluid" alt="Image 1">
                </div>
              </div>
              <div class="col-12 col-md-4 mb-3">
                <div class="image-container">
                  <img src="${pageContext.request.contextPath}/resources/img/activity3.jpg" class="img-fluid" alt="Image 2">
                </div>
              </div>
              <div class="col-12 col-md-4 mb-3">
                <div class="image-container">
                  <img src="${pageContext.request.contextPath}/resources/img/activity4.jpg" class="img-fluid" alt="Image 3">
                </div>
              </div>
            </div>
          </div>
          <!-- 欢迎信息 底 -->
        </div>

      </div>
    </div>

    <footer>
      <m:footer/>
    </footer>
  </div>

</body>


</html>